<!--事故档案列表-->
<template>
  <view>
    <!--每一项-->
    <view class="order">
      <view class="cu-list">
        <view class="cu-item cugrid" v-for="(item,index) in sgData" key="item.id">
          <view class="content" @click="gajin(item)">
            <view class="text-grey textgr text-ui">{{item.name}}</view>
            <view class="view-mk"> {{index < 9 ? "0" + (index +1) : index + 1}} </view>
            <view class="text-grey textgr text-hg"> 事故等级:{{accident_level[item.level]}}</view>
            <view class="text-grey textgr text-hg">
              事故日期:{{ parseInt(item.accidentTime) | dateFormat}}
            </view>
          </view>
          <view>
            <view style="margin-right: -10px">
              <u-button
                type="primary"
                class="custom-style"
                color="#225ea4"
                size="mini"
                shape="circle"
              >{{handle_state[item.handleResult]}}</u-button>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!--- unAPP官网组件日期选择器上拉弹出框-->
    <view>
      <u-popup :show="show" mode="top" @close="close" @open="open">
        <!--时间选择-->
        <view>
          <view class="example-body">
            <uni-datetime-picker
              type="date"
              :clear-icon="false"
              v-model="single"
              @maskClick="maskClick"
            />
          </view> 
        </view>

        <!--市区联动-->
        <!-- 	<view class="container" style="padding:0 24px;margin-top: 20px;">
					<uni-section title="" type="line" padding style="height: calc(100vh - 100px);">
						<uni-data-picker placeholder="请选择所在地区" popup-title="请选择所在地区" :localdata="dataTree"
							v-model="classes" @change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened"
							@popupclosed="onpopupclosed">
						</uni-data-picker>
					</uni-section>
				</view> -->
        <!--矿山企业-->

        <view style="padding: 5px 24px">
          <view class="button-sp-area" style="text-align: center">
            <button
              class="mini-btn btncas-one"
              @click="btnCancel()"
              type="default"
              size="mini"
            >
              取消
            </button>
            <button
              class="mini-btn btncas"
              style="background-color: #225ea4"
              type="warn"
              size="mini"
						 @click="searchval"
            >
              查询
            </button>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
	import {sgList} from '@/api/my/sg.js'
	import { mapState } from 'vuex'//引入mapState
export default {
  data() {
    return {
			dataList:{
				year:"",
			},
			sgData:[],
			sgId: null,
      // 下拉框选择企业
      showSex: false,
      model1: {
        userInfo: {
          name: "uView UI",
          sex: "",
        },
      },
      actions: [],
      // rules: {
      // 	'userInfo.name': {
      // 		type: 'string',
      // 		required: true,
      // 		message: '请填写姓名',
      // 		trigger: ['blur', 'change']
      // 	},
      // 	'userInfo.sex': {
      // 		type: 'string',
      // 		max: 1,
      // 		required: true,
      // 		message: '请选择男或女',
      // 		trigger: ['blur', 'change']
      // 	},
      // },
      radio: "",
      switchVal: false,
      //

      single: "",
      classes: "1-2",
      dataTree: [],
      // 下拉框选择企业完
      datetimesingle: "",
      range: ["2021", "2221"],
      datetimerange: [],


      show: false,
      cuIconList: [],
    };
  },

  //注意函数和data同级,不要写在methods内
  onNavigationBarButtonTap(e) {
    console.log("@@@", e);
    this.show = true;
    // this.$tab.navigateTo('/pages/my/setting/index')
  },
  watch: {
    datetimesingle(newval) {
      // console.log("单选:", this.datetimesingle);
    },
    range(newval) {
      // console.log("范围选:", this.range);
    },
    datetimerange(newval) {
      // console.log("范围选:", this.datetimerange);
    },
  },

  onLoad() {
    setTimeout(() => {
      this.datetimesingle = Date.now() - 2 * 24 * 3600 * 1000;
      this.single = "2021-2-12";
      this.datetimerange = ["2021-07-08 0:01:10", "2021-08-08 23:59:59"];
    }, 3000);
		
		this.getSgList()
  },

		computed:{
			...mapState({
				accident_level: state => state.sjzd.sjzdList.accident_level,
				handle_state: state => state.sjzd.sjzdList.handle_state,
			})
		},
		
		
  methods: {
		
		// 查询
		searchval(){
		this.dataList.year = this.single
		let data = this.dataList
		this.getSgList(data)
		this.show = false
			this.$refs.clearCity.clear()
		},
    open() {
      // console.log('open');
    },
    close() {
      this.show = false;
      // console.log('close');
    },
    change(e) {
      this.single = e;
      console.log("change事件:", (this.single = e));
    },
    changeLog(e) {
      console.log("change事件:", e);
    },
    maskClick(e) {
      console.log("maskClick事件:", e);
    },

    gajin(item) {
			this.sgId = item.id;
      uni.navigateTo({
				url:`/pages/my/accidentfile/accidentfiletails/index?id=${this.sgId}`
			});
    },
    btnCancel() {
      this.show = false;
    },
		
	// 事故列表数据
	getSgList(data) {
		sgList(data).then((result)=>{
			this.sgData = result.data
			console.log(this.sgData)
		}).catch((err)=>{console.log(err)})
	}
  },
};
</script>

<style lang="scss" scoped>
.order {
  width: 710rpx;
  background-color: #ffffff;
  margin: 20rpx auto;
  border-radius: 8rpx;
  box-sizing: border-box;
  padding: 20rpx;
  font-size: 28rpx;
  letter-spacing: 2rpx;
  box-shadow: 0px 3px 10px 0px rgba(148, 177, 188, 0.38);
}

.page {
  height: 100vh;
  width: 100vw;
}

.cu-list.menu-avatar > .cu-item {
  position: relative;
  display: flex;
  padding-right: 10rpx;
  height: 380rpx;
  background-color: #ffffff;
  justify-content: flex-end;
  align-items: center;
  margin-top: 30rpx;
  border-radius: 30rpx;
}

.cu-list.menu-avatar > .cu-item[data-v-0b41208f] {
  position: relative;
  display: flex;
  padding-right: 10rpx;
  height: 380rpx;
  background-color: #ffffff;
  justify-content: flex-end;
  align-items: center;
  margin-top: 30rpx;
  border-radius: 30rpx;
}

.cu-list.menu-avatar > .cu-item .content {
  position: absolute;
  left: 0px;
  width: calc(100% - 52px - 33px - 66px - 11px);
  line-height: 1.6em;
}

.text-grey,
.line-grey,
.lines-grey {
  color: #848484;
}

.text-orange,
.line-orange,
.lines-orange {
  color: #343434;
}

.cu-list > .cu-item {
  transition: all 0.6s ease-in-out 0s;
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
}

.textgr {
  line-height: 48rpx;
}

.cugrid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.example-body {
  background-color: #fff;
  padding: 10px;
}

.title {
  font-size: 14px;
  font-weight: bold;
  margin: 20px 0 5px 0;
}

.data-pickerview {
  height: 400px;
  border: 1px #e5e5e5 solid;
}

.popper__arrow {
  top: -6px;
  left: 50%;
  margin-right: 3px;
  border-top-width: 0;
  border-bottom-color: #ebeef5;
}

.popper__arrow {
  top: -6px;
  left: 50%;
  margin-right: 3px;
  border-top-width: 0;
  border-bottom-color: #ebeef5;
}

.u-form-item__body {
  display: flex;
  flex-direction: row;
  padding: 4px 0;
  border: 1px solid #e5e5e5;
}

.example-body[data-v-b41e3472] {
  background-color: #fff;
  padding: 22px 14px 18px 16px;
}

.text-ui {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #343434;
}

.text-hg {
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #595959;
}

.cugrid {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}

.view-mk {
  width: 44px;
  height: 38px;
  background-color: #225ea4;
  border-radius: 0px 21px 20px 0px;
  top: 19px;
  position: absolute;
  left: -23px;
  color: #eee;
  text-align: center;
  line-height: 36px;
  font-size: 16px;
  font-style: italic;
  font-weight: 600;
}

.custom-style {
  color: #ff0000;
}

.cugrid[data-v-531be18f] {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  margin-right: -20px;
}

uni-button {
  margin: 5px;
}
</style>
